<!doctype html>
<html lang="es">
<head>
  <title>#r00tHouse Mesh - Bienvenido</title>
  <style type="text/css">
    body {
      padding: 0;
      margin: 0;
      background-color: #000;
      font-family: sans-serif;
    }
    .row,.col,
    .row:after,.col:after,
    .row:before,.col:before{
      -webkit-box-sizing:border-box;
        -moz-box-sizing:border-box;
             box-sizing:border-box}
    /* clearfix */
    .row{*zoom:1}
    .row:before,
    .row:after{
      display:table;
      content:"";
      line-height:0}
    .row:after{clear:both}
    .row{
      padding:0;
      margin:0;}
    /* should probably put *zoom:1; here but for clarity it's separated*/
    ul.row,
    li.col{ list-style-type:none }
    .col{float:left}
    .col,
    .fill{width:100%}

    /* grid mq */
    @media (min-width:30em){
      .col:not(.fill){width:50%}
      .col.third:nth-child(3),
      .col.fifth:nth-child(5),
      .col.fourth+div:nth-child(3).fill,
      .col.fifth+div:nth-child(3).fill{width:100%}
      .col+.fill{width:50%}
    }
    @media (min-width:50em){
      .col.half{width:50%}
      .col.half+.fill{width:50%}
      .col.third,
      .col.third:nth-child(3){width:33.333%}
      .col.third+.fill{width:66.666%}
      .col.fourth{width:25%}
      .col.fourth+.fill{width:75%}
      .col.fourth+div:nth-child(3).fill{width:50%;}
      .col.fifth,
      .col.fifth:nth-child(5){width:20%}
      .col.fifth+.fill{width:80%}
      .col.fifth+div:nth-child(3).fill{width:60%;}
      .col.fifth+div:nth-child(4).fill{width:40%;}
    }
/* ie8 overrides - I'd suggest using conditionals with either ".ie-8 class or loading in a separate legacy stylesheet with conditionals */
    @media (min-width:30em){
      .row>.col{width:50%}
      .row>.fill.col{width:100%}
      .row>.half.col+.fill,
      .row>.third.col+.fill,
      .row>.fourth.col+.fill,
      .row>.fifth.col+.fill,
      .row>.fifth.col+div+div+.fill{width:50%}
      .row>.fourth.col+div+.fill,
      .row>.fifth.col+div+.fill,
      .row>.third.col+div+div,
      .row>.fifth.col+div+div+div+div{width:100%}
    }
    @media (min-width:50em){
      .row>.third.col,
      .row>.third.col+div+div{width:33.333%}
      .row>.third.col+.fill{width:66.666%}
      .row>.fourth.col{width:25%}
      .row>.fourth.col+.fill{width:75%}
      .row>.fourth.col+div+.fill{width:50%}
      .row>.fifth.col+.fill{width:80%}
      .row>.fifth.col,
      .row>.fifth.col+div+div+div+div{width:20%}
      .row>.fifth.col+div+.fill{width:60%}
      .row>.fifth.col+div+div+.fill{width:40%}
    }
    .header {
      color: #31d329;
      font-family: monospace;
    }
    body {
      color: #fff;
      margin-top: 20px;
    }
    .wrapper {
      margin-left: 60px; 
      margin-right:60px;
    }
    .logo {
      width: 200px;
      height: 270px;
    }
	.footnote{
		margin-top: 33px;
		font-family: serif;
		font-size: 12px;
		text-align: center;
	}
	.browse_button{
		margin: 7px;
		font-family: monospace;
		text-align: center;
		color: #31d329; /* Momentaneo para ver como va con el boton para navegar del portal cautivo*/
		background-image: url("browse_btn.png");
		background-repeat: repeat-x;
	}
  </style>
</head>
<body>
<div class="wrapper">
  <div class="row">
    <div class="col third">
      <center>
        <img src="logo.jpg" class="logo" />
      </center>
       <div class="browse_button">Navegar por la red</div>
    </div>
    <div class="col fill" style="background-color: #111" >
      <center class="header"><h1>
        Bienvenido a #r00tHouse-mesh
      </h1></center>
      <div class="row">
        <div class="col half" style="padding: 10px">
          Esta es una red de <strong>libre acceso</strong> gestionada por el
          <!-- Poner la pagina o la wiki del r00thouse en un server de la mesh -->
          <a href="hacklab.org.bo">r00thouse</a> y la comunidad local.
          <br>
      	 El objetivo es descentralizar las comunicaciones y dar <strong>libertad</strong> de
      	 acceso a las comunicaciones locales.
      	  <h3>Servicios Actuales</h3>
      	  <ul>
          <li> <a href="10.0.13.37">Wikipedia castellano</a> 
          		- <a href="es.wikipedia.uta"> es.wikipedia.uta </a> 
          </li>
          <li>
          		<a href=ftp:10.0.0.10>Descarga de archivos</a>
          </li>
          </ul>
          <div class="footnote">
          	Toda la red se ha construido usando herramientas de <strong>software libre</strong>
           </div>
        </div>
        <div class="col half" style="padding: 10px">
         
          <h3> Como aportar </h3>
          <h3> Como Brindar servicios </h3>
			 <h3> Servicios en desarrollo </h3>
			 <ul>
			 	<li>Chat</li>
			 	<li>Intercambio de contenidos con D-LAN</li>
			 	<li>Servidor GIT</li>
			 	<li>VoIP (llamadas gratis)</li>
			 	<li>etherpad</li>
			 </ul>

        </div>
      </div>
    </div>
  </div>
</div>
</html>
